<!--
 * @Author: zjj
 * @Date: 2020-02-21 15:44:32
 * @LastEditors: zjj
 * @LastEditTime: 2020-02-24 09:43:48
 -->
<!--  -->
<template>
  <div class="f-z">
    <z-header :title="module_object.name">
      <template v-slot:left>
        <div @click="$router.back()" class="left-wrap flex justify-center aligin-center">
          <span class="icon-left"></span>
        </div>
      </template>
    </z-header>
    <z-body>
      <swiper :options="swiperOption" class="swiper">
        <swiper-slide v-for="(slide, index) in module_object.swiperSlides" :key="index">
          <div class="swiper-item">
            <img class="img" :src="slide" />
          </div>
        </swiper-slide>
      </swiper>
      <div class="company-list">
        <div class="wrap flex">
          <template v-for="(item,index) in module_object.companyList">
            <div
              class="company-item flex justify-center aligin-center"
              :style="{background:module_object.bg}"
              :key="index"
              @click="toCompanyDetail(item)"
            >
              <div class="address">{{item.address}}</div>
              <div class="company-name">{{item.company}}</div>
            </div>
          </template>
        </div>
      </div>
    </z-body>
  </div>
</template>

<script>
import FZ from '../../assets/imgs/f-z.jpg'
import QTCY from '../../assets/imgs/q-t-c-y.jpg'
import GDCY from '../../assets/imgs/g-d-c-y.jpg'
import JZCY from '../../assets/imgs/j-z-c-y.jpg'
import SWYY from '../../assets/imgs/j-k-y-l.jpg'
import NYQP from '../../assets/imgs/n-y-q-p.jpg'
import ZGZ from '../../assets/imgs/ZGZ.png'
import HDZ from '../../assets/imgs/HDZ.png'
import LDX from '../../assets/imgs/LDX.png'
export default {
  components: {},
  data() {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  },
  computed: {
    module_object() {
      let params = this.$route.params.param
      switch (params) {
        case 'f-z':
          return {
            name: '时尚纺织',
            swiperSlides: [FZ],
            bg: '#8F91BA',
            companyList: [
              { address: '浙江', company: '亿骏时尚纺织' },
              { address: '兰溪', company: '华龙纺织', key: 'LHFZ' },
              { address: '浙江', company: '祥嘉纺织', key: 'XJFZ' },
              { address: '浙江', company: '仕雅达纺织', key: 'SYD' }
            ]
          }

        case 'g-d':
          return {
            name: '光电产业',
            swiperSlides: [GDCY],
            bg: '#002F6D',
            companyList: [
              { address: '浙江', company: '锦德光电材料', key: 'JJGD' },
              { address: '浙江', company: '怡钛积', key: 'YTJ' },
              { address: '浙江', company: '中科玖源新材料', key: 'ZKQY' },
              { address: '浙江', company: '海泰新材料', key: 'HT' },
              { address: '兰溪', company: '泛翌精细陶瓷' }
            ]
          }
        case 'x-n-y':
          return {
            name: '能源汽配',
            swiperSlides: [NYQP],
            bg: '#2E7C85',
            companyList: [
              { address: '浙江', company: '启铖汽配', key: 'QCQP' },
              { address: '浙江', company: '巨江电源科技' }
            ]
          }

        case 's-w':
          return {
            name: '生物医药',
            swiperSlides: [SWYY],
            bg: '#117CDF',
            companyList: [
              { address: '浙江', company: '康恩贝制药', key: 'KEB' },
              { address: '浙江', company: '天一堂药业' },
              { address: '浙江', company: '和利制冷设备', key: 'HXZL' }
            ]
          }
        case 'j-z':
          return {
            name: '建筑产业',
            swiperSlides: [JZCY],
            bg: '#A6040B',
            companyList: [
              { address: '浙江', company: '宝杰环保科', key: 'BJHB' }
            ]
          }
        case 'z-g-z':
          return {
            name: '诸葛镇',
            swiperSlides: [ZGZ],
            bg: '#2E7C85',
            companyList: [
              {
                address: '兰溪',
                company: '诸葛八卦村',
                key: 'BJHB',
                link:
                  'https://baike.baidu.com/item/%E8%AF%B8%E8%91%9B%E5%85%AB%E5%8D%A6%E6%9D%91/1286660?fr=aladdin'
              }
            ]
          }
        case 'h-d-z':
          return {
            name: '黄店镇',
            swiperSlides: [HDZ],
            bg: '#2E7C85',
            companyList: [
              {
                address: '黄店',
                company: '芝堰古村',
                link:
                  'https://baike.baidu.com/item/%E7%99%BD%E9%9C%B2%E5%B1%B1/7674939?fr=aladdin'
              }
            ]
          }
        case 'l-d-x':
          return {
            name: '灵洞乡',
            swiperSlides: [LDX],
            bg: '#2E7C85',
            companyList: [
              {
                address: '兰溪',
                company: '地下长河',
                link:
                  'https://baike.baidu.com/item/%E5%9C%B0%E4%B8%8B%E9%95%BF%E6%B2%B3/6489044?fr=aladdin'
              }
            ]
          }
        case 'q-t-c-y':
          return {
            name: '其他产业',
            swiperSlides: [QTCY],
            bg: '#F29C30',
            companyList: [
              { address: '兰溪', company: '自立环保', key: 'ZLHB' },
              { address: '浙江', company: '立新珠宝', key: 'LXZB' },
              { address: '浙江', company: '蓝宝机械', key: 'LBJX' },
              { address: '浙江', company: '兰福家俱', key: 'LFHM' },
              { address: '浙江', company: '山野机械', key: 'SYJX' },
              { address: '浙江', company: '康鹏半导体', key: 'KP' }
            ]
          }
      }
    }
  },
  watch: {},
  methods: {
    toCompanyDetail(item) {
      if (item.link) {
        location.href = item.link
        return
      }
      if (item.key) {
        this.$router.push({ name: 'company-detail', params: { key: item.key } })
      }
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.f-z {
  height: 100%;
  .left-wrap {
    height: 100%;
    width: 100%;
    .icon-left {
      width: 18px;
      height: 18px;
      background: url('../../assets/imgs/arrow_left.png');
      background-size: 100% 100%;
    }
  }
  .swiper {
    height: 216px;
    .swiper-item {
      display: flex;
      justify-content: center;
      height: 100%;
      width: 100%;
      .img {
        height: 100%;
        width: 100%;
      }
    }
  }
  .company-list {
    margin-top: 30px;
    height: calc(100% - 261px);
    overflow-y: auto;
    .wrap {
      flex-wrap: wrap;
    }
    .company-item {
      margin: 0 8px 10px;
      flex-direction: column;
      height: 72px;
      width: 108px;
    }
    .address {
      color: #fff;
      font-size: 16px;
      line-height: 40px;
    }
    .company-name {
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>